<!DOCTYPE html>
<html>
 <head>
  <title>My IMFU Options</title>
<style>
body{
background:#000
}
#wrapper{
color:#fff;
background-color: #444444;
margin:2em auto;
width:500px;
padding:1em;
border-radius:20px;
box-shadow:0px 0px 6px #ffffff;
background-image:-o-linear-gradient(top, #444444, #999999);
background-image:linear-gradient(top, #444444, #999999);
}
h1{
font-family: sans-serif;font-size: 1.3em
}
label{
display: block;
width: 200px;
float: left;
clear: left;
text-align: right;
margin-left: -1em
}
select{
margin-left: 1em;
width: 150px;
font-size: 0.8em
}        
li{
list-style-type: none
}
#creds{
width:670px;
margin-left:-335px;
position:fixed;
bottom:0;
left:50%;
}
#creds, #creds a{
color:#fff
}		  
</style>
</head>
 <body>
 <div id="wrapper"> 
 <h1>My IMFU Options</h1> 
 <form>
 
 <ul>
   <li><label for="fraud">Fraud Protection</label>
   <select name="fraudpro" id="myimfufraud" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="skin">Forum Skin</label>
   <select name="skin" id="myimfuforskin" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="font">Fix Forum Fonts</label>
   <select name="font" id="myimfuforfont" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="strip">Strip Page Titles</label>
   <select name="strip" id="myimfustriptit" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="color">Color Site Sections</label>
   <select name="color" id="myimfucolor" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="groupp">Group Posting Tools</label>
   <select name="groupp" id="myimfugroup" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="forp">Forum Posting Tools</label>
   <select name="forp" id="myimfuforp" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="stick">Hide Stickers</label>
   <select name="stick" id="myimfustick" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="badges">Hide Badges</label>
   <select name="badges" id="myimfubadges" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
   <li><label for="prodt">Product Tools</label>
   <select name="prodt" id="myimfuprodt" />
     <option value="enabled">Enabled</option>
     <option value="disabled">Disabled</option>
   </select>
   </li>
 </ul>
 </form> 
 </div>
<div id="creds">
<p>Some Icons by <a href="http://www.famfamfam.com/lab/icons/silk/">Mark James</a> - Some Icons by <a href="http://p.yusukekamiyamane.com/">Yusuke Kamiyamane</a> - Forum Icons from <a href="http://userstyles.org/styles/5195">whatrevolution</a><br></p>
</div>
<script>
var fraudset = document.getElementById( 'myimfufraud' ),
    skinset = document.getElementById( 'myimfuforskin' ),
    fontset = document.getElementById( 'myimfuforfont' ),
    stripset = document.getElementById( 'myimfustriptit' ),
    colorset = document.getElementById( 'myimfucolor' ),
    grouppset = document.getElementById( 'myimfugroup' ),
    forpset = document.getElementById( 'myimfuforp' ),
    stickset = document.getElementById( 'myimfustick' ),
    badgesset = document.getElementById( 'myimfubadges' ),
    prodtset = document.getElementById( 'myimfuprodt' );

fraudset.addEventListener( 'change', function() {
	widget.preferences.fraudpro = this.value;	
}, false );

skinset.addEventListener( 'change', function() {
	widget.preferences.skin = this.value;
}, false );

fontset.addEventListener( 'change', function() {
	widget.preferences.forfont = this.value;
}, false );

stripset.addEventListener( 'change', function() {
	widget.preferences.strip = this.value;
}, false );

colorset.addEventListener( 'change', function() {
	widget.preferences.color = this.value;
}, false );

grouppset.addEventListener( 'change', function() {
	widget.preferences.groupp = this.value;
}, false );

forpset.addEventListener( 'change', function() {
	widget.preferences.forp = this.value;
}, false );

stickset.addEventListener( 'change', function() {
	widget.preferences.stick = this.value;
}, false );

badgesset.addEventListener( 'change', function() {
	widget.preferences.badges = this.value;
}, false );

prodtset.addEventListener( 'change', function() {
	widget.preferences.prodt = this.value;
}, false );

if ( widget.preferences.fraudpro && widget.preferences.skin && widget.preferences.forfont && widget.preferences.strip && widget.preferences.color && widget.preferences.groupp && widget.preferences.forp && widget.preferences.stick && widget.preferences.badges && widget.preferences.prodt) {
	fraudset.value = widget.preferences.fraudpro;
	skinset.value = widget.preferences.skin;
	fontset.value = widget.preferences.forfont;
	stripset.value = widget.preferences.strip;
	colorset.value = widget.preferences.color;
	grouppset.value = widget.preferences.groupp;
	forpset.value = widget.preferences.forp;
	stickset.value = widget.preferences.stick;
	badgesset.value = widget.preferences.badges;
	prodtset.value = widget.preferences.prodt;
}
</script>
 </body>
</html>